<template>
	<view>
		<w-navbar type="normal" background="linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)">
			<view slot="navbar-center">进度条组件</view>
		</w-navbar>

		<pageDemoBlock title="基本用法" color="#1c87e4">
			<view class="p-2">
				<w-progress :progress="progress" borderRadius="0"></w-progress>
			</view>
			<view class="p-2">
				<w-progress :progress="progress" backgroundColor="#1762ee"></w-progress>
			</view>
		</pageDemoBlock>
		<pageDemoBlock title="进度动画" color="#e46439">
			<view class="p-2">
				<w-progress :progress="progress" borderRadius="40" animation backgroundColor="#515151"></w-progress>
			</view>
			<view class="p-2">
				<w-progress :progress="progress" borderRadius="40" animation backgroundColor="#27b320"></w-progress>
			</view>
		</pageDemoBlock>

		<pageDemoBlock title="更多用法" color="#15c9e4">
			<view class="p-2 m-b-2">
				<w-progress :progress="dynamicprogress" borderRadius="40" animation
					:backgroundColor="color[colorIndex]">
				</w-progress>
			</view>


			<view class="m-b-2 option-button">
				<view class="btn">
					<w-button @click="addProgress">增加进度</w-button>
				</view>
				<view class="btn">
					<w-button @click="reduceProgress">减少进度</w-button>
				</view>
			</view>
		</pageDemoBlock>


	</view>
</template>

<script>
	import pageDemoBlock from '@/components/page-demo-block'
	export default {
		components: {
			pageDemoBlock
		},
		data() {
			return {
				color: ['#00AAFF', '#9E95FF', '#f9a28c', '#979AC3', '#6AC3A5', '#DAC261'],
				colorIndex: 0,
				dynamicprogress: 0,

				progress: 80,

				intervalId1: null,
				intervalId2: null,
				timeId: null
			}
		},
		onLoad() {
			this.timeId = setTimeout(() => {
				this.intervalId1 = setInterval(() => {
					if (this.colorIndex == this.color.length - 1) {
						this.colorIndex = 0
					} else {
						this.colorIndex++
					}
				}, 2000)
				this.intervalId2 = setInterval(() => {
					if (this.dynamicprogress == 100) {
						this.dynamicprogress = 0
					}
					if (this.dynamicprogress >= 0) {
						this.dynamicprogress++
					}
				}, 100)
			}, 1500)
		},
		methods: {
			addProgress() {
				if (this.progress === 100) {

				} else {
					this.progress = this.progress + 10
				}
			},
			reduceProgress() {
				if (this.progress === 0) {

				} else {
					this.progress = this.progress - 10
				}
			}
		},
		onUnload() {
			clearTimeout(this.timeId)
			clearInterval(this.intervalId1)
			clearInterval(this.intervalId2)
		}
	}
</script>

<style lang="scss" scoped>
	.option-button {
		display: flex;
		justify-content: space-evenly;

		.btn {
			width: 40%;
		}
	}
</style>
